@charset "utf-8";

$index_color: #0078d7;

.fl {
  float: left;
}
.fr {
  float: right;
}
.clearfix::after {
  clear: both;
}

.web {
  .header_nav {
    background: #222222;
    margin-bottom: 0;
    border-bottom: none;
    .img_box {
      padding: 8px 15px;
    }
    .navbar-nav > li {
      & > a {
        color: #9d9d9d;
      }
      &.active,
      &:hover {
        a {
          color: #ffffff;
          background: #080808;
        }
      }
    }
    .navbar-nav > .open {
      & > a,
      &a:hover,
      & > a:focus {
        background: #222222;
      }
    }
  }
  footer {
    padding: 20px 0 15px;
    background: #3b3b3b;
    .footer_textbox {
      a {
        span {
          color: #a1a3ab;
          font-size: 14px;
        }
      }
      p {
        color: #a1a3ab;
        font-size: 11px;
      }
    }
    .footer_imgbox {
      .img_i {
        width: 38px;
        height: 38px;
        border-radius: 19px;
        background: #d8d8e0;
        text-align: center;
        line-height: 38px;
        margin: 0 4px;
        position: relative;
        i {
          font-size: 28px;
          color: #4c4c52;
        }
        .img_div {
          display: none;
          width: 145px;
          height: 145px;
          overflow: hidden;
          position: absolute;
          top: -148px;
          left: -50px;
          img {
            width: 100%;
          }
        }
        &:hover .img_div {
          display: block;
        }
      }
    }
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .web {
    .navbar-nav > li > a {
      padding: 15px 5px;
    }
  }
}

@media only screen and (min-width: 992px) and (max-width: 1007px) {
  .web {
    footer .footer_imgbox .img_i {
      margin: 0 2px;
    }
  }
}

@media only screen and(max-width:991px) {
  .web {
    footer .footer_textbox {
      text-align: center;
    }
    footer .footer_imgbox {
      display: flex;
      justify-content: space-around;
    }
  }
}
